<template>
  <el-container>
    <el-main>
      <div class="default-main ba-table-box">
        <TableHeader
          :buttons="['refresh', 'export', 'comSearch', 'columnDisplay']"
          :quick-search-placeholder="placeholder"
          @action="baTable.onTableHeaderAction"
        />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" @action="baTable.onTableAction" />
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { ref, provide, onMounted, markRaw, reactive, inject } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import { DeviceRealTimeRecordNew } from "@/api/backend/index";
import { useRoute } from "vue-router";
import { useNavTabs } from "@/store/navTabs";
import DateTime from "@/components/datePicker/index.vue";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const navTabs = useNavTabs();
const dictionary = inject("dictionary") as any;
const realTime = inject("realTime") as any;

//字段显隐记忆功能
const filedShowOff = (filter: any, defaultFileds: boolean) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return defaultFileds;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(
      route.path + DeviceRealTimeRecordNew
    )
      ? (navTabs as any).pageSizeMap.get(route.path + DeviceRealTimeRecordNew)
      : 10;
  }
  return 10;
};

const state: {
  defaultFileds: any[]; //默认内循环温度
  searchForm: any;
} = reactive({
  defaultFileds: [],
  searchForm: {
    // regCode: route.query.regCode,
    deviceId: route.query.deviceId,
    pageSize: pageSizeKeep(),
    params: {
      beginTime: realTime.beginTime,
      endTime: realTime.endTime,
    },
  },
});

const getValue = () => {
  baTable.comSearch.form = Object.assign(baTable.comSearch.form, {
    params: {
      beginTime: realTime.beginTime,
      endTime: realTime.endTime,
    },
  });
};

//全局事件总线
const { proxy } = useCurrentInstance();
const baTable = new baTableClass(
  new baTableApi(DeviceRealTimeRecordNew), //this.api = api菜单管理相关
  {
    pk: "mongoId",
    column: [
      {
        show: filedShowOff("time", true),
        label: "采集时间",
        prop: "time",
        comSearchRender: "customRender",
        align: "center",
        fixed: "left",
        width: 160,
        comSearchCustomRender: markRaw(DateTime),
      },
      {
        show: filedShowOff("currentProcessQuantity", true),
        label: "总计数/个",
        prop: "currentProcessQuantity",
        align: "center",
        operator: false,
        width: 100,
        // render: "customTemplate",
        // customTemplate: (row: TableRow, field: TableColumn, value: any) => {
        //   let finalData = _.filter(row.data, { elementName: "总计数" });
        //   return "<p>" + finalData[0].elementValue + "</p>";
        // },
      },
      {
        show: filedShowOff("capacity", true),
        label: "产能（个/分钟）",
        prop: "capacity",
        align: "center",
        operator: false,
        width: 130,
      },
      {
        show: filedShowOff("frequency", true),
        label: "运行频率（HZ）",
        prop: "frequency",
        align: "center",
        operator: false,
        width: 130,
      },
      {
        show: filedShowOff("current", true),
        label: "输出电流（A）",
        prop: "current",
        align: "center",
        operator: false,
        width: 120,
      },
      {
        show: filedShowOff("m403", true),
        label: "Y变频器异常",
        prop: "m403",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m407", true),
        label: "Y报警灯",
        prop: "m407",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("m414", true),
        label: "Y后通安全销",
        prop: "m414",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m415", false),
        label: "Y油压不足",
        prop: "m415",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m416", false),
        label: "Y过负载",
        prop: "m416",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("m417", false),
        label: "Y夹料台浮动",
        prop: "m417",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m421", false),
        label: "Y前通安全销",
        prop: "m421",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m432", false),
        label: "Y润滑泵、冷却泵过载",
        prop: "m432",
        align: "center",
        operator: false,
        width: 140,
      },
      {
        show: filedShowOff("m434", false),
        label: "Y材料终了灯",
        prop: "m434",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m436", false),
        label: "Y计数终了灯",
        prop: "m436",
        align: "center",
        operator: false,
        width: 110,
      },
      {
        show: filedShowOff("m437", false),
        label: "Y短寸灯",
        prop: "m437",
        align: "center",
        operator: false,
      },
      {
        show: operatorShowOff([route.path + "/edit"]),
        label: "操作",
        align: "center",
        width: "130",
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "edit",
            title: "详细数据",
            text: "",
            type: "primary",
            icon: "iconfont iconfont icon-guize1",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
      },
    ],
    filter: state.searchForm,
    acceptQuery: false, //不接受url的query参数并自动触发通用搜索
  },
  {
    // 默认表单数据(添加)
    defaultItems: {
      cabinetType: 0, //立式
    },
  }
);

//获取字典
const getDictionary = () => {};
getDictionary();

onMounted(() => {
  // getValue();
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(DeviceRealTimeRecordNew);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      //回滚功能暂无
      if (data.name == "rollback") {
        // onRollback([data.row[baTable.table.pk!]])
      } else if (data.name == "info") {
        //携带主键字段pk
        //   infoButtonClick(
        //     (data.row as TableRow)[baTable.table.pk!],
        //     data.row as any
        //   );
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
defineExpose({});
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0;
}
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}
</style>
